<template>
  <div class="home">
    <button class="jump-btn" @click="jump('demo')">demo 👉</button>
    <button class="jump-btn" @click="jump('pag')">pag 👉</button>
    <button class="jump-btn" @click="jump('props')">props 👉</button>
    <button class="jump-btn" @click="jump('$emit')">$emit 👉</button>
    <button class="jump-btn" @click="jump('slot')">slot 👉</button>
    <button class="jump-btn" @click="jump('mixins')">mixins 👉</button>
    <button class="jump-btn" @click="jump('plugins')">plugins 👉</button>
    <button class="jump-btn" @click="jump('life-circle')">life-circle 👉</button>
    <button class="jump-btn" @click="jump('$refs')">$refs 👉</button>
    <button class="jump-btn" @click="jump('vuex')">vuex 👉</button>
    <button class="jump-btn" @click="jump('which-func')">WhichFunc 👉</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    jump(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style scoped lang='less'>
  .home {
    box-sizing: border-box;
    padding: 20px;
  }
</style>
